const options = [
	{ text: '选项1', value: 1 },
	{ text: '选项2', value: 2 }
];
const { $val, $ref } = JiessCore;
export default function() {
	const param = {};
	if (env === 'react-antd') {
		param.title = '下拉框详例'
	} else {
		param.header = '下拉框详例'
		param.formParam = { labelWidth: '108px' }
	}
	const area = this.area(param);
	// 每一次的add会构建一个单独
	area.add(
		$Select({
			$name: 'slt1',
			$label: '基础用法',
			$options: options,
			multiple: true
		}),
		$Select({
			$name: 'slt2',
			$label: '函数回调下拉',
			$options: cb => {
				// 可用于异步渲染下拉
				setTimeout(() => {
					cb(options)
				}, 1600)
			},
		}),
		$Select({
			$name: 'slt3',
			$label: '异步函数下拉',
			$options: async () => {
				const opts = await new Promise(resolve => {
					setTimeout(() => {
						resolve(options)
					}, 1600)
				})
				// 可用于异步渲染下拉
				return opts
			},
		})
	);
	// 当多个下拉框同时都需要使用相同的异步下拉源数据，建议使用响应式方案
	const opts = $ref([]);
	setTimeout(() => {
		opts.value = options;
	}, 1600);

	area.add(
		$Select({
			$name: 'slt4',
			$label: '响应式下拉',
			$options: $val(opts, 'value'),
		})
	);
	// 元素添加完毕，确定渲染
	const action = area.done();
}